<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Mermaid图表编辑器</title>
    <link rel="stylesheet" href="src/css/common.css">
    <link rel="stylesheet" href="src/css/editor.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/themes/prism.min.css">
    <script src="https://cdn.jsdelivr.net/npm/mermaid@10.4.0/dist/mermaid.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/prism.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/components/prism-mermaid.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/html2pdf.js/0.10.1/html2pdf.bundle.min.js"></script>
</head>

<body>
    <div class="editor-container">
        <!-- 顶部工具栏 -->
        <header class="editor-header">
            <div class="header-left">
                <h1>Mermaid图表编辑器</h1>
            </div>
            <div class="header-center">
            </div>
            <div class="header-right">
                <button id="home-btn" class="nav-btn">
                    <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                        <path d="M3 9l9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"></path>
                        <polyline points="9 22 9 12 15 12 15 22"></polyline>
                    </svg>
                    返回首页
                </button>
                <button id="docs-btn" class="nav-btn">
                    <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                        <path d="M2 3h6a4 4 0 0 1 4 4v14a3 3 0 0 0-3-3H2z"></path>
                        <path d="M22 3h-6a4 4 0 0 0-4 4v14a3 3 0 0 1 3-3h7z"></path>
                    </svg>
                    文档中心
                </button>
                <button id="demos-btn" class="nav-btn">
                    <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                        <polygon
                            points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2">
                        </polygon>
                    </svg>
                    案例中心
                </button>
            </div>
        </header>

        <!-- 主要内容区域 -->
        <div class="editor-content">
            <!-- 左侧代码编辑区 -->
            <div class="code-panel">
                <div class="panel-header">
                    <h3>代码编辑</h3>
                    <div class="panel-actions">
                        <button id="chart-docs-btn" class="action-btn" title="查看图表提示文档">
                            <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                                <circle cx="12" cy="12" r="10"></circle>
                                <path d="M12 16v-4"></path>
                                <path d="M12 8h.01"></path>
                            </svg>
                            图表提示
                        </button>
                        <button id="copy-code" class="action-btn">
                            <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor"
                                stroke-width="2">
                                <rect x="9" y="9" width="13" height="13" rx="2" ry="2"></rect>
                                <path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1"></path>
                            </svg>
                            复制代码
                        </button>
                    </div>
                </div>
                <div class="code-container">
                    <div id="code-highlight" class="code-highlight"></div>
                    <textarea id="code-editor" class="code-editor" spellcheck="false"
                        placeholder="请输入Mermaid代码..."></textarea>
                </div>
            </div>

            <!-- 分隔条 -->
            <div id="resizer" class="resizer"></div>

            <!-- 右侧预览区 -->
            <div class="preview-panel">
                <div class="panel-header">
                    <h3>图表预览</h3>
                    <div class="panel-actions">
                        <!-- 主题切换下拉菜单 -->
                        <div class="dropdown">
                            <button id="theme-dropdown" class="action-btn dropdown-toggle">
                                <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor"
                                    stroke-width="2">
                                    <rect x="2" y="3" width="20" height="14" rx="2" ry="2"></rect>
                                    <line x1="8" y1="21" x2="16" y2="21"></line>
                                    <line x1="12" y1="17" x2="12" y2="21"></line>
                                </svg>
                                主题
                                <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor"
                                    stroke-width="2" style="margin-left: 5px;">
                                    <polyline points="6 9 12 15 18 9"></polyline>
                                </svg>
                            </button>
                            <div id="theme-menu" class="dropdown-menu">
                                <button id="theme-default" class="dropdown-item theme-option" data-theme="default">
                                    <div class="theme-preview theme-default-preview"></div>
                                    <span>默认</span>
                                </button>
                                <button id="theme-dark" class="dropdown-item theme-option" data-theme="dark">
                                    <div class="theme-preview theme-dark-preview"></div>
                                    <span>暗黑</span>
                                </button>
                                <button id="theme-forest" class="dropdown-item theme-option" data-theme="forest">
                                    <div class="theme-preview theme-forest-preview"></div>
                                    <span>森林绿</span>
                                </button>
                                <div class="dropdown-divider"></div>
                                <button id="theme-industrial" class="dropdown-item theme-option"
                                    data-theme="industrial">
                                    <div class="theme-preview theme-industrial-preview"></div>
                                    <span>工业风</span>
                                </button>
                                <button id="theme-cyberpunk" class="dropdown-item theme-option" data-theme="cyberpunk">
                                    <div class="theme-preview theme-cyberpunk-preview"></div>
                                    <span>赛博朋克</span>
                                </button>
                                <button id="theme-minimalist" class="dropdown-item theme-option"
                                    data-theme="minimalist">
                                    <div class="theme-preview theme-minimalist-preview"></div>
                                    <span>简约白</span>
                                </button>
                                <button id="theme-greenit" class="dropdown-item theme-option" data-theme="greenit">
                                    <div class="theme-preview theme-greenit-preview"></div>
                                    <span>绿色IT</span>
                                </button>
                                <div class="dropdown-divider"></div>
                                <button id="custom-theme-btn" class="dropdown-item">
                                    <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor"
                                        stroke-width="2">
                                        <path d="M12 20h9"></path>
                                        <path d="M16.5 3.5a2.121 2.121 0 0 1 3 3L7 19l-4 1 1-4Z"></path>
                                    </svg>
                                    自定义主题
                                </button>
                            </div>
                        </div>

                        <!-- 导出下拉菜单 -->
                        <div class="dropdown">
                            <button id="export-dropdown" class="action-btn dropdown-toggle">
                                <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor"
                                    stroke-width="2">
                                    <path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"></path>
                                    <polyline points="7 10 12 15 17 10"></polyline>
                                    <line x1="12" y1="15" x2="12" y2="3"></line>
                                </svg>
                                导出
                                <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor"
                                    stroke-width="2" style="margin-left: 5px;">
                                    <polyline points="6 9 12 15 18 9"></polyline>
                                </svg>
                            </button>
                            <div id="export-menu" class="dropdown-menu">
                                <button id="export-svg" class="dropdown-item">
                                    <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor"
                                        stroke-width="2">
                                        <path
                                            d="M14 10H3a1 1 0 0 1-1-1V5a1 1 0 0 1 1-1h11a1 1 0 0 1 1 1v4a1 1 0 0 1-1 1z">
                                        </path>
                                        <path
                                            d="M6 15h8a1 1 0 0 1 1 1v5a1 1 0 0 1-1 1H6a1 1 0 0 1-1-1v-5a1 1 0 0 1 1-1z">
                                        </path>
                                        <line x1="10" y1="10" x2="10" y2="15"></line>
                                    </svg>
                                    导出SVG
                                </button>
                                <button id="export-png" class="dropdown-item">
                                    <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor"
                                        stroke-width="2">
                                        <rect x="3" y="3" width="18" height="18" rx="2" ry="2"></rect>
                                        <circle cx="8.5" cy="8.5" r="1.5"></circle>
                                        <polyline points="21 15 16 10 5 21"></polyline>
                                    </svg>
                                    导出PNG
                                </button>
                                <button id="export-pdf" class="dropdown-item">
                                    <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor"
                                        stroke-width="2">
                                        <path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"></path>
                                        <polyline points="14 2 14 8 20 8"></polyline>
                                        <line x1="16" y1="13" x2="8" y2="13"></line>
                                        <line x1="16" y1="17" x2="8" y2="17"></line>
                                        <polyline points="10 9 9 9 8 9"></polyline>
                                    </svg>
                                    导出PDF
                                </button>
                            </div>
                        </div>
                    </div>
                </div>
                <div id="preview-container" class="preview-container">
                    <!-- 控制按钮区域 -->
                    <div class="preview-controls">
                        <!-- 缩放控制按钮组 -->
                        <div class="zoom-controls">
                            <button id="zoom-out" class="control-btn zoom-btn" title="缩小">
                                <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor"
                                    stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                                    <line x1="5" y1="12" x2="19" y2="12"></line>
                                </svg>
                            </button>
                            <button id="zoom-in" class="control-btn zoom-btn active" title="放大">
                                <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor"
                                    stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                                    <line x1="12" y1="5" x2="12" y2="19"></line>
                                    <line x1="5" y1="12" x2="19" y2="12"></line>
                                </svg>
                            </button>
                            
                            <button class="control-btn bg-color-btn" title="选择背景颜色">
                                <div class="color-preview-wrapper">
                                    <input type="color" id="background-color" class="color-picker" value="#ffffff">
                                </div>
                            </button>
                            
                            <button class="control-btn pattern-btn active" data-pattern="none" title="无图案">
                                <div class="pattern-preview"></div>
                            </button>
                            <button class="control-btn pattern-btn" data-pattern="dots" title="点状图案">
                                <div class="pattern-preview dots-preview"></div>
                            </button>
                            <button class="control-btn pattern-btn" data-pattern="lines" title="线条图案">
                                <div class="pattern-preview lines-preview"></div>
                            </button>
                            <button class="control-btn pattern-btn" data-pattern="grid" title="网格图案">
                                <div class="pattern-preview grid-preview"></div>
                            </button>
                        </div>

                    </div>

                    <!-- 图表预览区域 -->
                    <div id="chart-preview-wrapper" class="chart-preview-wrapper">
                        <!-- 导览小窗 -->
                        <div id="mini-map" class="mini-map">
                            <div class="mini-map-header">
                                <span>导览</span>
                            </div>
                            <div class="mini-map-content">
                                <div id="mini-map-viewport" class="mini-map-viewport"></div>
                            </div>
                        </div>

                        <div id="chart-preview" class="chart-preview">
                            <div class="empty-state">
                                <svg width="64" height="64" viewBox="0 0 24 24" fill="none" stroke="currentColor"
                                    stroke-width="1">
                                    <path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"></path>
                                    <polyline points="7 10 12 15 17 10"></polyline>
                                    <line x1="12" y1="15" x2="12" y2="3"></line>
                                </svg>
                                <p>开始编辑代码，实时预览图表</p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- 图表提示文档模态框 -->
    <div id="chart-docs-modal" class="modal">
        <div class="modal-content chart-docs-modal-content">
            <div class="modal-header">
                <h3 id="chart-docs-title">图表提示文档</h3>
                <button id="close-chart-docs-modal" class="close-btn">
                    <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                        <line x1="18" y1="6" x2="6" y2="18"></line>
                        <line x1="6" y1="6" x2="18" y2="18"></line>
                    </svg>
                </button>
            </div>
            <div class="modal-body chart-docs-body">
                <div class="chart-docs-container">
                    <!-- 图表类型信息 -->
                    <div class="chart-docs-header">
                        <h4 id="chart-type-name">流程图</h4>
                        <p id="chart-type-description">用于展示流程、算法或步骤的执行顺序</p>
                    </div>

                    <!-- 语法说明 -->
                    <div class="chart-docs-section">
                        <h5 class="docs-section-title">语法</h5>
                        <div id="chart-syntax-content" class="syntax-content">
                            <pre><code>flowchart 方向
    节点ID[节点文本] --> 节点ID{条件判断}</code></pre>
                        </div>
                    </div>

                    <!-- 核心参数 -->
                    <div class="chart-docs-section">
                        <h5 class="docs-section-title">参数</h5>
                        <div id="chart-parameters-content" class="parameters-content">
                            <!-- 动态生成参数内容 -->
                        </div>
                    </div>

                    <!-- 实际案例 -->
                    <div class="chart-docs-section">
                        <h5 class="docs-section-title">示例</h5>
                        <div class="example-content">
                            <pre id="chart-example-code"><code>flowchart TD
    Start([开始]) --> Input[输入用户名密码]
    Input --> Validate{验证信息}
    Validate -->|正确| LoginSuccess[登录成功]
    Validate -->|错误| ShowError[显示错误]</code></pre>
                        </div>
                    </div>

                    <!-- 使用提示 -->
                    <div class="chart-docs-section">
                        <h5 class="docs-section-title">提示</h5>
                        <div id="chart-tips-content" class="tips-content">
                            <!-- 动态生成提示内容 -->
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- 自定义主题弹窗 -->
    <div id="custom-theme-modal" class="modal">
        <div class="modal-content">
            <div class="modal-header">
                <h3>自定义主题</h3>
                <button id="close-theme-modal" class="close-btn">
                    <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                        <line x1="18" y1="6" x2="6" y2="18"></line>
                        <line x1="6" y1="6" x2="18" y2="18"></line>
                    </svg>
                </button>
            </div>
            <div class="modal-body">
                <div class="theme-customization">
                    <div class="theme-control-row">
                        <div class="theme-control-group">
                            <label for="primary-color">主色调</label>
                            <input type="color" id="primary-color" class="color-input" value="#667eea">
                            <input type="text" id="primary-color-text" class="color-text" value="#667eea">
                        </div>
                        <div class="theme-control-group">
                            <label for="primary-border-color">主边框颜色</label>
                            <input type="color" id="primary-border-color" class="color-input" value="#667eea">
                            <input type="text" id="primary-border-color-text" class="color-text" value="#667eea">
                        </div>
                    </div>
                    <div class="theme-control-row">
                        <div class="theme-control-group">
                            <label for="node-color">节点填充颜色</label>
                            <input type="color" id="node-color" class="color-input" value="#667eea">
                            <input type="text" id="node-color-text" class="color-text" value="#667eea">
                        </div>
                        <div class="theme-control-group">
                            <label for="node-border-color">节点边框颜色</label>
                            <input type="color" id="node-border-color" class="color-input" value="#667eea">
                            <input type="text" id="node-border-color-text" class="color-text" value="#667eea">
                        </div>
                    </div>
                    <div class="theme-control-row">
                        <div class="theme-control-group">
                            <label for="primary-text-color">主文字颜色</label>
                            <input type="color" id="primary-text-color" class="color-input" value="#ffffff">
                            <input type="text" id="primary-text-color-text" class="color-text" value="#ffffff">
                        </div>
                        <div class="theme-control-group">
                            <label for="text-color">普通文字颜色</label>
                            <input type="color" id="text-color" class="color-input" value="#333333">
                            <input type="text" id="text-color-text" class="color-text" value="#333333">
                        </div>
                    </div>
                    <div class="theme-control-row">
                        <div class="theme-control-group">
                            <label for="line-color">线条颜色</label>
                            <input type="color" id="line-color" class="color-input" value="#667eea">
                            <input type="text" id="line-color-text" class="color-text" value="#667eea">
                        </div>
                        <div class="theme-control-group">
                            <label for="link-color">连接线颜色</label>
                            <input type="color" id="link-color" class="color-input" value="#667eea">
                            <input type="text" id="link-color-text" class="color-text" value="#667eea">
                        </div>
                    </div>
                    <div class="theme-control-row">
                        <div class="theme-control-group">
                            <label for="secondary-color">次要背景色</label>
                            <input type="color" id="secondary-color" class="color-input" value="#f5f7fa">
                            <input type="text" id="secondary-color-text" class="color-text" value="#f5f7fa">
                        </div>
                        <div class="theme-control-group">
                            <label for="tertiary-color">第三背景色</label>
                            <input type="color" id="tertiary-color" class="color-input" value="#e0e0e0">
                            <input type="text" id="tertiary-color-text" class="color-text" value="#e0e0e0">
                        </div>
                    </div>
                    <div class="theme-control-row">
                        <div class="theme-control-group">
                            <label for="background-color">整体背景色</label>
                            <input type="color" id="background-color" class="color-input" value="#ffffff">
                            <input type="text" id="background-color-text" class="color-text" value="#ffffff">
                        </div>
                        <div class="theme-control-group">
                            <label for="cluster-color">集群背景色</label>
                            <input type="color" id="cluster-color" class="color-input" value="#f5f7fa">
                            <input type="text" id="cluster-color-text" class="color-text" value="#f5f7fa">
                        </div>
                    </div>
                </div>
                <div class="theme-preview-container">
                    <h4>主题预览</h4>
                    <div class="theme-preview-diagram">
                        <div class="preview-cluster">
                            <div class="preview-node" id="preview-node-1"></div>
                            <div class="preview-connector" id="preview-connector-1"></div>
                            <div class="preview-node" id="preview-node-2"></div>
                        </div>
                        <div class="preview-connector" id="preview-connector-2"></div>
                        <div class="preview-node" id="preview-node-3"></div>
                    </div>
                </div>
            </div>
            <div class="modal-footer">
                <button id="reset-theme" class="btn-secondary">重置</button>
                <button id="apply-custom-theme" class="btn-primary">应用主题</button>
            </div>
        </div>
    </div>

    <script type="module" src="src/js/utils/chartUtils.js"></script>
    <script type="module" src="src/js/utils/mermaidConfig.js"></script>
    <script type="module" src="src/js/utils/navigation.js"></script>
    <script type="module" src="src/data/chart-docs.js"></script>
    <script type="module" src="src/js/editor.js"></script>
    <script>
        // 全局函数：从其他页面打开编辑器
        window.openEditorWithCode = function (code) {
            const encodedCode = encodeURIComponent(code);
            window.location.href = `editor.html?code=${encodedCode}`;
        };
    </script>
</body>

</html>